<template>
  <!-- 项目类型详情 -->
  <el-dialog
    v-dialogDrag
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    :before-close="cancel"
    class="dialogStyleSmall"
  >
    <div style="text-align:left">
      <el-form ref="addSysformData" :model="formData" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="类型名称" prop="typeName">
              <el-input v-model="formData.typeName" readonly size="medium" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="类型顺序" prop="sort">
              <el-input-number
                v-model="formData.orderNum"
                disabled
                style="width: 100%"
                size="medium"
                controls-position="right"
                :min="1"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="">
              <label slot="label" v-html="`备&emsp;&emsp;注`" />
              <el-input v-model="formData.remark" readonly :rows="3" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import { detailProjectType } from '@/api/superviseBaseInfo/typeManage/projectType'
// 菜单下拉树用的的方法和样式
// import treeselect from '@riophae/vue-treeselect'
// import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'DetailDialog',
  // components: { treeselect },
  data() {
    return {
      /* 详情 start */
      proOptions: [], // 项目类型数组
      dialogTitle: '', // 弹框标题
      dialogVisible: false, // 弹框显隐
      formData: {
        parentId: null, // 父级id
        typeName: '', // 类型名称
        orderNum: '',
        level: '', // 等级
        remark: '' // 备注
      }
      /* 详情 end */
    }
  },
  methods: {
    /* 详情 start */
    // 初始化弹出
    handleAdd(title, id) {
      this.dialogVisible = true
      this.dialogTitle = title
      this.getDetailById(id)
    },
    // 获取详情
    async getDetailById(id) {
      const { data } = await detailProjectType(id)
      this.formData = { ...data }
      if (data.parentId === '0') {
        this.formData.parentId = null
      }
    },
    // 添加弹框取消
    cancel() {
      this.dialogVisible = false
    },
    submitForm() {
      this.dialogVisible = false
    }
    /* 详情 end */
  }
}
</script>

